<template>
    <a-config-provider>
        <router-view v-slot="{ Component }">
            <component :is="Component">
                <template #LayoutHeader>
                    <a-button class="logout" style="float: right;" @click="loginOut">
                        <template #icon>
                            <LogoutOutlined />
                        </template>
                        退出登录
                    </a-button>
                </template>
            </component>
        </router-view>
        <div class="Loading" v-if="showLoading && UIStore.Mapping[$route.path]">
            <a-spin />
        </div>
    </a-config-provider>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ClearToken } from '@/utils/auth';
import { inject, provide, ref } from 'vue';
import { UseUIStore } from '@/@base/store/UI';

const logoutEvent = inject('logoutEvent');
const SetDict = inject('SetDict');


SetDict('city', [
    { label: 'AA', value: '01' },
    { label: 'BB', value: '02' },
    { label: 'CC', value: '03' },
])


const UIStore = UseUIStore();
const showLoading = ref(true);
provide('SetShowLoadingState', val => { showLoading.value = val })

const Router = useRouter();
const loginOut = function () {
    ClearToken();
    Router.push('/login')
    setTimeout(() => {
        logoutEvent();
    })
}

</script>
<style scoped lang="less">
.Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgba(180, 180, 180, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>